import { commonProps, pickOwnForBasicComponent } from 't/common/utils';
import {
  computed,
  defineComponent,
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  toRef,
  watch,
} from 'vue';

import { date, debounce, dom, setCssVar, useQuasar } from '@teld/q-components';

import data2 from '../chart-bar/json/data2.json';
import data3 from '../chart-bar/json/data3.json';
import distinctCountData from '../chart-bar/json/dataDistinctCount.json';
import option from '../chart-bar/json/option.json';
import option2 from '../chart-bar/json/option2.json';
import option3 from '../chart-bar/json/option3.json';
import distinctCountOption from '../chart-bar/json/optionDistinctCount.json';

export default defineComponent({
  setup(props, { attrs, emit, expose, slots }) {
    const $lang = {
      tabs: {
        listView: '列表视图',
        chartView: '图表视图',
      },
    };

    const tab = ref('listView');

    const tabs = computed(() => {
      return Object.keys($lang.tabs).map(key => {
        return {
          label: $lang.tabs[key],
          code: key,
        };
      });
    });

    const columns = [
      {
        name: 'name',
        required: true,
        label: 'Dessert (100g serving)',
        align: 'left',
        field: row => row.name,
        format: val => `${val}`,
        sortable: true,
      },
      {
        name: 'calories',
        align: 'center',
        label: 'Calories',
        field: 'calories',
        sortable: true,
      },
      { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
      { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
      { name: 'protein', label: 'Protein (g)', field: 'protein' },
      { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
      {
        name: 'calcium',
        label: 'Calcium (%)',
        field: 'calcium',
        sortable: true,
        sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
      },
      {
        name: 'iron',
        label: 'Iron (%)',
        field: 'iron',
        sortable: true,
        sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
      },
    ];

    const rows = [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        sodium: 87,
        calcium: '14%',
        iron: '1%',
      },
      {
        name: 'Ice cream sandwich',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        sodium: 129,
        calcium: '8%',
        iron: '1%',
      },
      {
        name: 'Eclair',
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        sodium: 337,
        calcium: '6%',
        iron: '7%',
      },
      {
        name: 'Cupcake',
        calories: 305,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        sodium: 413,
        calcium: '3%',
        iron: '8%',
      },
      {
        name: 'Gingerbread',
        calories: 356,
        fat: 16.0,
        carbs: 49,
        protein: 3.9,
        sodium: 327,
        calcium: '7%',
        iron: '16%',
      },
      {
        name: 'Jelly bean',
        calories: 375,
        fat: 0.0,
        carbs: 94,
        protein: 0.0,
        sodium: 50,
        calcium: '0%',
        iron: '0%',
      },
      {
        name: 'Lollipop',
        calories: 392,
        fat: 0.2,
        carbs: 98,
        protein: 0,
        sodium: 38,
        calcium: '0%',
        iron: '2%',
      },
      {
        name: 'Honeycomb',
        calories: 408,
        fat: 3.2,
        carbs: 87,
        protein: 6.5,
        sodium: 562,
        calcium: '0%',
        iron: '45%',
      },
      {
        name: 'Donut',
        calories: 452,
        fat: 25.0,
        carbs: 51,
        protein: 4.9,
        sodium: 326,
        calcium: '2%',
        iron: '22%',
      },
      {
        name: 'KitKat',
        calories: 518,
        fat: 26.0,
        carbs: 65,
        protein: 7,
        sodium: 54,
        calcium: '12%',
        iron: '6%',
      },
    ];

    const page = ref('yes');

    return () => {
      return (
        <div>
          <div class='row items-center'>
            <div class='col'>
              <q-tabs v-model={tab.value} align='left' active-color='primary'>
                {tabs.value.map(item => {
                  return (
                    <q-tab
                      class='q-pa-none q-mx-md'
                      name={item.code}
                      label={item.label}
                    />
                  );
                })}
              </q-tabs>
            </div>
            <div class='col-auto'>
              <q-tab-panels v-model={tab.value}>
                <q-tab-panel name='listView' class='q-pa-none'>
                  <q-btn style='min-width:auto' icon='filter_alt' />
                  <q-btn style='min-width:auto' icon='settings' />
                </q-tab-panel>
                <q-tab-panel name='chartView' class='q-pa-none'>
                  <div class='row q-gutter-xs' style='overflow: hidden;'>
                    <q-btn label='图表' icon='add' class='tr-button-default' />
                    <q-btn
                      label='刷新'
                      icon='refresh'
                      class='tr-button-default'
                    />
                    <q-select
                      style='max-width: 300px'
                      borderless
                      v-model={page.value}
                      options={[
                        { label: '分页', value: 'yes' },
                        { label: '不分页', value: 'no' },
                      ]}
                    />
                  </div>
                </q-tab-panel>
              </q-tab-panels>
            </div>
          </div>
          <div class='row'>
            <div class='col-12'>
              <q-tab-panels v-model={tab.value}>
                <q-tab-panel name='listView' class='q-pa-none'>
                  <q-separator></q-separator>
                  <t-data-grid
                    ref='dataGrid1'
                    title='Treats'
                    rows={rows}
                    columns={columns}
                    row-key='name'
                  ></t-data-grid>
                </q-tab-panel>
                <q-tab-panel name='chartView' class='q-pa-none'>
                  <div class='row q-col-gutter-sm q-pt-sm'>
                    {[1, 2, 3, 4, 5].map(item => (
                      <div class='col-sm-12 col-sm-6 col-md-6 col-lg-3'>
                        <div
                          class='bg-grey-2'
                          style='border-radius: 7.5px; padding: 30px;'
                        >
                          <div class='column'>
                            <div class='row justify-between items-center'>
                              <div class='col text-bold	'>
                                按照 问题类别 统计
                              </div>
                              <div class='col-auto'>
                                <div class='row q-gutter-xs'>
                                  <t-icon size='sm' name='fullscreen_exit' />
                                  <t-icon size='sm' onClick={() => { alert(3)}} name='more_horiz' />
                                </div>
                              </div>
                            </div>
                            <div class='col'>
                              <t-chart-bar
                                height='300px'
                                option={option2}
                                data={data2}
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                  {/* <div class='row q-col-gutter-xl'>
                    {[1, 2, 3, 4, 5].map(item => (
                      <div class='col-4' v-for='n in 5'>
                        <div class='bg-grey-4'>&nbsp;ffff</div>
                      </div>
                    ))}
                  </div> */}
                </q-tab-panel>
              </q-tab-panels>
            </div>
          </div>
        </div>
      );
    };
  },
});
